<div class="container">
  <div class="inner-container">
    <div class="top-header">
      <div class="image-panel" [ngStyle]="{'background-image': 'url('+ organizationInfo.coverUrl + ')'}">
        <button nz-button nzType="default" (click)="openBgConfigModal()">
          <i class="iconfont icon-camera-line"> </i>
          上传封面图片</button>
      </div>
      <div class="logo-panel">
        <div class="logo-div" [ngStyle]="{'background-color':!organizationInfo.logo?'#000':'#fff'} ">
          <div (click)="openConfigModal()" class="header-top">
            <ng-container *ngIf="!organizationInfo.logo">
              <i class="iconfont icon-camera-line"> </i>
              <div>上传头像</div>
            </ng-container>
            <ng-container *ngIf="organizationInfo.logo">
              <div class="hover">
                <span>上传logo</span>
                <img [src]="organizationInfo.logo" />
              </div>
            </ng-container>
          </div>
        </div>

      </div>


      <div class="org-name">
        {{organizationInfo.name}}
      </div>

      <div class="tab-panel">
        <div class="tab-item select" (click)="tabChange(0)" [ngClass]="{'select': curTabIndex==0}">基本信息</div>
        <div class="tab-item" (click)="tabChange(1)" [ngClass]="{'select': curTabIndex==1}">部门信息</div>
        <div class="tab-item" (click)="tabChange(2)" [ngClass]="{'select': curTabIndex==2}">企业证照</div>
        <div class="tab-item" (click)="tabChange(3)" [ngClass]="{'select': curTabIndex==3}">企业内部编码</div>
      </div>
    </div>


    <div class="body-panel">
      <zepride-org-base-info [organizationInfo]="organizationInfo" *ngIf="curTabIndex==0"></zepride-org-base-info>

      <zepride-org-department-list *ngIf="curTabIndex==1" [orgId]="organizationInfo.id"
        (onDepartmentSaved)="getDepartments()">
      </zepride-org-department-list>

      <zepride-org-image-list [orgInfo]="organizationInfo" (orgChanged)="saveOrgInfo()" *ngIf="curTabIndex==2">
      </zepride-org-image-list>

      <div class="org-codes" *ngIf="curTabIndex==3">
        <div class="org-codes-item-panel">
          <div class="header" nz-row>
            <div nz-col nzSpan="4">编码类型</div>
            <div nz-col nzSpan="12"></div>
            <div nz-col nzSpan="8" class="action-panel">
              <button nz-button nzType="default" (click)="addOrgCodeItem()">
                <i class="iconfont icon-add-line"></i>
                新增编码
              </button>
              <button nz-button nzType="primary" (click)="saveOrgCodes()">
                保存
              </button>
            </div>
          </div>
          <div class="content">
            <div class="code-item" *ngFor="let item of orgCodeList">
              <div class="com-canvues">
                <zepride-org-code-item (delete)="delOrgCodeItem($event)" [codeItemPanleData]="item"
                  style="width: 100%;">
                </zepride-org-code-item>
              </div>
              <nz-divider nzDashed></nz-divider>

              <div *ngFor="let codeDisplay of item.codeDisplays" class="codeItem-dis">
                <span class="margin-r">【{{codeDisplay.codeName}}】生成样式</span>
                <div class="codeItem-dis-content">
                  <span>
                    {{codeDisplay.value}}
                  </span>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>